<template>
  <div class="base-single-select">
    <el-row :gutter="props.gutter">
      <el-col
        v-for="(item, index) in props.options"
        :key="index"
        :span="item.span || 6"
      >
        <div
          class="select-item"
          :class="{
            active: props.multiple
              ? props.modelValue.find(i => i === item.value)
              : props.modelValue === item.value
          }"
          @click="handleSelectClick(item.value)"
        >
          <p>{{ item.name }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: [String, Number, Array],
    default: ''
  },
  options: {
    type: Array,
    default: () => []
  },
  multiple: {
    type: Boolean,
    default: false
  },
  gutter: {
    type: Number,
    default: 10
  }
})

const emits = defineEmits(['update:modelValue', 'change'])

const handleSelectClick = data => {
  if (props.multiple) {
    if (props.modelValue.find(item => item.value === data)) {
      emits(
        'update:modelValue',
        props.modelValue.splice(
          props.modelValue.findIndex(item => item.value === data),
          1
        )
      )
      emits(
        'change',
        props.modelValue.splice(
          props.modelValue.findIndex(item => item.value === data),
          1
        )
      )
    } else {
      emits('update:modelValue', props.modelValue.push(data))
      emits('change', props.modelValue.push(data))
    }
    emits('update:modelValue', [...props.modelValue, data])
    emits('change', [...props.modelValue, data])
  } else {
    emits('update:modelValue', data)
    emits('change', data)
  }
}
</script>

<style scoped lang="scss">
.base-single-select {
  .select-item {
    width: 100%;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.2s;

    p {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      white-space: nowrap;
    }

    &.active {
      background-color: #0aa7ff;
      border: 1px solid rgba(10, 167, 255, 0.5);

      p {
        color: #fff;
      }
    }
  }
}
</style>
